<template>
  <!-- 选择租赁资产弹窗 -->
  <div>
    <el-dialog
      title="请选择租赁的资产"
      v-model="state.dialogVisible"
      width="782px"
      class="leaseAssetDialogPage"
      center
      :close-on-click-modal="false"
    >
        <div class="d-flex a-center m-b20">
            <label>资产名称</label>
            <el-input
                    class="m-l5"
                    v-model="state.assetsName"
                    clearable
                    placeholder="请输入资产名称"
                    style="width: 300px;"
                    @input="queryAssetsName"
            >
            </el-input>
            <el-button
                    class="m-l5"
                    color="#FF7B50"
                    style="color: #fff"
                    @click="queryAssetsName"
            >查询</el-button>
        </div>
      <el-table :data="state.tableData" border v-loading="tableLoadingFlag" max-height="500">
        <el-table-column prop="index" label="序号" width="100" align="center" />
        <el-table-column prop="assetsName" label="资产名称" align="center" />
        <el-table-column prop="type" label="资产类型" align="center">
          <template #default="scope">
            {{
              scope.row.type == 1
                ? "农贸市场"
                : scope.row.type == 2
                ? "商业(绿道)"
                : scope.row.type == 3
                ? "商业(商铺)"
                : scope.row.type == 4
                ? "写字楼"
                : scope.row.type == 5
                ? "综合体"
                : "其他"
            }}
          </template>
        </el-table-column>
  
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button plain color="#FF7B50" @click="doSelect(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElTable, ElTableColumn, ElDialog } from "element-plus";
import { housingApi } from "@/api/assets";

const state = reactive({
  dialogVisible: false,
  tableData: [],
  newTableData:[],
  assetsName:''
});
const tableLoadingFlag = ref(false);
const initTableData = () => {
  tableLoadingFlag.value = true;
  housingApi.getAssetsList('').then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      state.tableData = data.map((n, i) => {
        n.index = i + 1;
        return n;
      });
      state.newTableData = JSON.parse(JSON.stringify(state.tableData));
      tableLoadingFlag.value = false;
    }
  });
};

// 向父组件传值
const emits = defineEmits(["getAssetId"]);
const doSelect = (row) => {
  console.log('address',row)
  let obj = {
    assetsId: row.assetsId,
    assetsName: row.assetsName,
    address:row.address,
    propertyCompanyId:row.propertyCompanyId,
  };
  emits("getAssetId", obj);
  state.dialogVisible = false;
};

// 开启弹窗
const open = () => {
  initTableData();
  state.dialogVisible = true;
};

/**
 * 根据资产名称本地模糊查询
 */
const queryAssetsName = () => {
    if(state.assetsName==='' || state.assetsName.trim()===''){
        return  state.tableData = state.newTableData;
    }
    state.tableData =  state.newTableData.filter(item=>{
        if(item.assetsName.indexOf(state.assetsName) > -1){
            return item;
        }
    });
}

defineExpose({ open });
</script>

<style lang="scss" scoped>
:deep(.leaseAssetDialogPage) {
  .el-dialog__header {
    padding-top: 18px;
    padding-bottom: 0;
    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #1a1a1a;
      font-family: SourceHanSansMedium;
    }
  }
  .el-dialog__body {
    padding-top: 25px;
    .el-table .el-table__header-wrapper .el-table__header .el-table__cell {
      padding: 20px 0;
      background: #f7f7fa;
      .cell {
        font-weight: 400;
        color: #4d4d4d;
      }
    }
  }
}
</style>
